import React, { Component, } from 'react';
import { StyleSheet, Text, TextInput, View, } from 'react-native';
import HomeSelector from '../../app/selectors/home';
import * as HomeActions from '../../app/actions/home';
import connect from '../../app/store/connect';
import urls from '../../app/constants/urls';
import Toast from '../../components/Toast'
import { GET, POST, } from '../../commons/utils/request';
import TopCard from '../../components/TopCard/TopCard'
import { saveToken, getUserId } from '../../commons/utils/passport'

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: '#FFFFFF',
  },
  content: {
    justifyContent: 'center',
    alignContent: 'center',
    alignItems: 'center'
  },
  phone: {
    width: 320,
    height: 40,
    marginTop: 50,
    borderColor: '#F0F0F0',
    borderWidth: 0.6,
    borderRadius: 4,
    paddingLeft: 10,
  },
  verifyCode: {
    width: 200,
    height: 40,
    marginTop: 20,
    borderColor: '#F0F0F0',
    borderWidth: 0.6,
    borderRadius: 4,
    paddingLeft: 10,
  },
  verifyCodeBtn: {
    width: 110,
    marginLeft: 10,
    marginTop: 20,
    alignContent: 'center',
    alignSelf: 'center',
    textAlign: 'center',
    paddingTop: 5,
    paddingBottom: 5,
    borderRadius: 6,
    borderColor: '#0091ff',
    borderWidth: 1,
    color: '#0091ff',
  },
  verifyCodeContainer: {
    flexDirection: 'row',
    textDecorationStyle: 'solid',
    textDecorationLine: 'underline',
    lineHeight: 1,
    textDecorationColor: '#0091ff',
  },
  next: {
    width: 320,
    marginTop: 50,
    borderRadius: 5,
    color: '#FFFFFF',
    fontSize: 16,
    textAlign: 'center',
    textAlignVertical: 'center',
    backgroundColor: '#0091ff',
    paddingTop: 10,
    paddingBottom: 10,
  },
});

@connect(HomeSelector, HomeActions)
export default class BindEmail extends Component {
  static navigationOptions = {
    headerTitle: '绑定邮箱',
  };

  constructor(props) {
    super(props);
    this.state = {
      email: '',
      code: '',
    };
  }


  // 获取验证码
  async sendCode222(email) {
    console.log('TAGGG', `===========sendCode22===email====${email}`);
    if(!email || email.length < 5 || email.indexOf("@") <= 0) {
      Toast.show({ title: "请输入正确的邮箱地址", });
      return
    }
    const param = {
      bizType: 'USER_MSG_BIND',
      mainKey: email
    }
    console.log('TAGGG', `===========sendCode22===param====${JSON.stringify(param)}`);
    await POST(urls.send, JSON.stringify(param)).then(resp => {
      console.log('TAGGG', `sendCode22====resp==${JSON.stringify(resp)}`);
      if(resp && resp.code === 0) {
        Toast.show({ title: "发送邮件验证码成功", });
      } else {
        Toast.show({ title: "发送验证码失败, " + resp.msg, });
      }
    });
  }

  // 绑定邮箱
  async bindEmail() {
    console.log('TAGGG', '========bindEmail======')
    let params = this.props?.navigation?.state?.params
    const userId = await getUserId()
    console.log('TAGGG', '======bindEmail==getUserId======' + userId)
    console.log('TAGGG', '========bindEmail===params=====' + JSON.stringify(params))
    const param = {
      checkCode: this.state.code,
      passwd: params.passwd,
      userId: params.userId,
      bindCode: this.state.email,
      bindType: 'bindEmail'
    }
    console.log('TAGG', `===========bindEmail===param====${JSON.stringify(param)}`);
    await POST(urls.bindEmail, JSON.stringify(param)).then(resp => {
      console.log('TAGGG', `bindEmail====resp==${JSON.stringify(resp)}`);
      if(resp && resp.code === 0) {
        Toast.show({ title: "绑定成功, 去登陆", });
        this.props.navigation.navigate('Login', param);
      } else {
        Toast.show({ title: "绑定邮箱失败, " + resp.msg, });
      }
    });
  }

  render() {
    const data ={title: '嗨, 欢迎注册', desc: '绑定邮箱, 开启 Payment 服务之旅', icon: 'http://120.48.109.211:8088/static/icon/money.png'}
    return (
      <View style={styles.root}>
        <TopCard dataSource= {data}></TopCard>
        <View style ={styles.content}>
          <TextInput
            style={styles.phone}
            placeholder="请输入邮箱地址"
            placeholderTextColor="#999999"
            onChangeText={(email) => this.setState({ email, })}
          />
          <View style={styles.verifyCodeContainer}>
            <TextInput
              style={styles.verifyCode}
              placeholder="请输入邮件验证码"
              placeholderTextColor="#999999"
              keyboardType="number-pad"
              onChangeText={(code) => this.setState({ code, })}
            />
            <Text
              style={styles.verifyCodeBtn}
              onPress={() => {
                this.sendCode222(this.state.email);
              }}
            >获取验证码</Text>
          </View>
          <Text
            style={styles.next}
            onPress={() => {
              this.bindEmail();
            }}
          >完成</Text>
        </View>
      </View>
    );
  }
}
